import { defineComponent, h, Transition } from "vue";

const transitionStyle = "0.3s height ease-in-out";

const transitionHooks = {
  name: "collapse",
  onBeforeEnter(el: any) {
    const e = el as HTMLElement;
    e.style.transition = transitionStyle;
    e.style.height = "0";
    e.style.overflow = "hidden";
  },
  onEnter(el: any) {
    const e = el as HTMLElement;
    void e.offsetHeight;
    e.style.height = `${e.scrollHeight}px`;
  },
  onAfterEnter(el: any) {
    const e = el as HTMLElement;
    e.style.transition = "";
    e.style.height = "";
    e.style.overflow = "";
  },
  onBeforeLeave(el: any) {
    const e = el as HTMLElement;
    e.style.height = `${e.scrollHeight}px`;
    e.style.overflow = "hidden";
    void e.offsetHeight;
  },
  onLeave(el: any) {
    const e = el as HTMLElement;
    e.style.transition = transitionStyle;
    e.style.height = "0";
  },
  onAfterLeave(el: any) {
    const e = el as HTMLElement;
    e.style.transition = "";
    e.style.height = "";
    e.style.overflow = "";
  },
};
const CollapseTransition = defineComponent({
  name: "CollapseTransition",
  setup(_, { slots }) {
    return () => h(Transition, { ...transitionHooks }, slots.default?.());
  },
});

export default CollapseTransition;
